<!-- eslint-disable vue/v-on-event-hyphenation -->
<template>
  <div class="search-box">
    <!--加了个id,有用勿删-->
    <div id="defaultPopover">
      <el-form ref="queryRef" class="query-form" :model="mySearchForm" inline>
        <div id="formItem" class="form-item">
          <el-form-item
            v-for="(item, index) in copyItem"
            :key="index"
            :label="item.name + '：'"
            :prop="item.key"
          >
            <template v-if="item.isSlot">
              <slot :name="item.slotName"></slot>
            </template>
            <template v-else-if="item.type == 'dateRange2'">
              <div style="display: flex">
                <span>
                  <form-item
                    v-model:itemValue="mySearchForm[item.startProp]"
                    type="date"
                    :item-props="item"
                    @disableDateFunc="
                      (time: any, cb: any) => disableStartDateFunc(time, mySearchForm[item.endProp], cb)
                    "
                  ></form-item>
                </span>
                <span style="margin: 0px 8px">-</span>
                <span>
                  <form-item
                    v-model:itemValue="mySearchForm[item.endProp]"
                    type="date"
                    :item-props="item"
                    @disableDateFunc="
                      (time: Date, cb: any) => disableEndDateFunc(time, mySearchForm[item.startProp], cb)
                    "
                  ></form-item>
                </span>
              </div>
            </template>
            <template v-else>
              <form-item
                v-model:itemValue="mySearchForm[item.key]"
                :type="item.type"
                :item-props="item"
              ></form-item>
            </template>
          </el-form-item>
          <div class="btn-box">
            <div class="handle-btns">
              <el-button
                v-if="showReset"
                v-permission="{ action: 'find' }"
                class="reset-btn"
                plain
                @click="reset()"
              >
                <i class="iconfont icon-fanhui1"></i>
                重置
              </el-button>
              <el-button
                v-permission="{ action: 'find' }"
                type="primary"
                class="search-btn"
                @click="search()"
              >
                <i class="iconfont icon-fangdajing"></i>
                查询
              </el-button>
            </div>
          </div>
        </div>
        <div v-if="showBtn" class="show-hide-btn df aic" @click="changeIsBrandFold()">
          <span style="margin-right: 4px"> {{ isBrandFold ? '查询收起' : '查询展开' }}</span>
          <i-ep-arrow-down v-if="!isBrandFold"></i-ep-arrow-down>
          <i-ep-arrow-up v-else></i-ep-arrow-up>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script setup lang="ts">
import FormItem from '@/components/FormItem/index.vue'
import { deepObjClone } from '@/utils/index'
import { PropType } from 'vue'
const props = defineProps({
  searchForm: {
    // 表单对象
    type: Object,
    required: true
  },
  searchItem: {
    // 表单项数组对象
    type: Array as PropType<TsearchItem[]>,
    default: () => []
  },
  initReset: {
    // 初始渲染是否重置一下表单
    type: Boolean,
    default: false
  },
  showReset: {
    // 是否显示重置按钮
    type: Boolean,
    default: true
  }
})
const emits = defineEmits(['handleSearch', 'handleReset', 'reCountTableHeight', 'update:searchForm'])
const mySearchForm = computed({
  // 表单对象,计算属性防止子改父
  get() {
    return props.searchForm
  },
  set(value: any) {
    emits('update:searchForm', value)
  }
})
const queryRef = ref()
const copyItem = ref<TsearchItem[]>([]) // 实际用来渲染的数据项
let backupItem: TsearchItem[] = [] // 备份数据,用来处理展开回收
watch(
  () => props.searchItem, // 监听searchItem,页面初始化可能有异步
  (val: any) => {
    copyItem.value = deepObjClone(val).map((v: any) => {
      return v
    })
    backupItem = deepObjClone(copyItem.value)
  },
  { deep: true, immediate: true }
)

const isBrandFold = ref(true) // 控制展开收起
const showBtn = ref(false) // 是否显示展开收起按钮
/**
 * 切换展开收起
 */
function changeIsBrandFold() {
  if (isBrandFold.value) {
    hideItem()
  } else {
    copyItem.value = deepObjClone(backupItem)
    // 展开收起重新计算tableHeight表格高度
    nextTick(() => {
      emits('reCountTableHeight')
    })
  }
  isBrandFold.value = !isBrandFold.value
}
/**
 * 递归查元素高度,是否完成收起
 */
function hideItem() {
  const dom = document.getElementById('formItem') as HTMLElement
  if (dom.clientHeight > 60) {
    copyItem.value.pop()
    nextTick(() => {
      hideItem()
      // 展开收起重新计算tableHeight表格高度
      emits('reCountTableHeight')
    })
  }
}
/**
 * 重置
 */
function reset() {
  queryRef.value.resetFields()
  emits('handleReset', '')
}
/**
 * 查询
 */
function search() {
  emits('handleSearch')
}
/**
 * 设置是否显示展开收起按钮
 */
function showBrandBtn() {
  nextTick(() => {
    const dom = document.getElementById('formItem') as HTMLElement
    if (dom.clientHeight > 60) {
      showBtn.value = true
      isBrandFold.value = true
    } else {
      showBtn.value = false
    }
  })
}
/**
 *
 * @param {date} time 用户选择的结束时间
 * @param {date} val 用户选择的开始时间
 * @param {function} cb 给子组件的回调
 */
function disableEndDateFunc(time: Date, val: string, cb: (arg0: boolean) => void) {
  cb(time.getTime() < Date.parse(val || '') || time.getTime() < new Date().getTime())
}
function disableStartDateFunc(time: Date, val: string, cb: (arg0: boolean) => void) {
  cb(time.getTime() > Date.parse(val || ''))
}
onMounted(() => {
  showBrandBtn()
  if (props.initReset) {
    reset()
  }
})
</script>
<style lang="scss" scoped>
.search-box {
  .view-box {
    margin-bottom: 12px;

    .view-left {
      display: flex;
    }

    .view-right {
      font-size: 14px;
      color: #558df7;
      cursor: pointer;
      margin-left: auto;
      .show-hide-btn {
        margin-left: 15px;
      }
    }
  }
  .query-form {
    width: 100%;
    display: flex;
    align-items: start;
    flex-grow: 1;
    .form-item {
      display: flex;
      flex-wrap: wrap;
      flex-grow: 1;
    }
    :deep(.el-form-item) {
      margin-bottom: 10px;
      margin-right: 34px;
      box-sizing: border-box;
    }
    :deep(.el-form-item__label) {
      padding: 0px;
      font-size: 14px;
      font-weight: 400;
      color: #333333;
      white-space: nowrap;
    }
    .handle-btns {
      // min-width: 150px;
      display: flex;
      font-size: 14px;
      font-weight: 400;
      margin-bottom: 10px;

      .iconfont {
        margin-right: 6px;
        font-size: 14px;
      }

      .icon-fangdajing {
        font-size: 13px;
      }
    }
    .btn-box {
      display: flex;
      justify-content: flex-end;
    }
  }
  .show-hide-btn {
    font-size: 14px;
    color: #558df7;
    cursor: pointer;
    margin-left: auto;
    white-space: nowrap;
    .iconfont {
      font-size: 10px;
      margin-left: 2px;
    }

    .up-icon {
      transform: rotate(180deg);
    }
  }
}
</style>
